<template>
    <view class="applyforLoan">
        <!-- <view class="tabBox">
            <image class="banner4" :src="bannerUrl" style="width: 100%;"></image>
            <view class="tabName">申请借款信息</view>
        </view> -->
        <u-form :model="form" ref="uForm">
            <u-form-item label="借款人" label-width="180" prop="riderName" required>
                <u-input v-model="form.riderName" maxlength="11" disabled />
            </u-form-item>
            <u-form-item label="骑手ID" label-width="180" prop="riderId" required>
                <u-input v-model="form.riderId" disabled/>
            </u-form-item>
            <u-form-item label="手机号码" label-width="180" prop="riderPhone" required>
                <u-input v-model="form.riderPhone" disabled />
            </u-form-item>
            <u-form-item label="借款人住址" label-width="180" prop="riderAddress" required>
                <u-input v-model="form.riderAddress" disabled />
            </u-form-item>
            <u-form-item label="身份证号" label-width="180" prop="riderIdNumber" required>
                <u-input v-model="form.riderIdNumber" disabled />
            </u-form-item>
            <u-form-item label="借款用途" label-width="180" prop="reason" required>
                <!-- @click="yongtuShow = true" -->
                <u-input v-model="form.reason" type="select" :select-open="yongtuShow" placeholder="请选择借款用途" disabled />
            </u-form-item>
            <u-form-item label="骑手类别" label-width="180" prop="loanAttribute" required v-if="form.reason != '垫付车辆租金' && form.reason != '新骑手日维度生活费'">
                <u-input v-model="form.loanAttribute" type="select" :select-open="leibieShow" @click="leibieShow = true"
                    placeholder="请选择骑手类别" disabled/>
            </u-form-item>
            <u-form-item label="车行名称" label-width="180" prop="carName" required v-if="form.reason == '垫付车辆租金'">
                <u-input v-model="form.carName" placeholder="请输入名称"/>
            </u-form-item>
            <u-form-item label="收款人姓名" label-width="180" prop="payeeName" required v-if="form.loanAttribute != '专送骑手' && form.reason != '新骑手日维度生活费'">
                <u-input v-model="form.payeeName" placeholder="请输入名称"/>
            </u-form-item>
            <u-form-item label="开户银行" label-width="180" prop="bankName" required v-if="form.loanAttribute != '专送骑手' && form.reason != '新骑手日维度生活费'">
<!--                <u-input type="select" v-model="form.bankName" placeholder="请选择开户银行"-->
<!--                    @click="showPickerMax1()"></u-input>-->
                <u-input type="text" v-model="form.bankName" placeholder="请输入开户银行" ></u-input>
            </u-form-item>
            <u-form-item label="收款账号" label-width="180" prop="bankAccount" required v-if="form.loanAttribute != '专送骑手' && form.reason != '新骑手日维度生活费'">
                <u-input v-model="form.bankAccount" placeholder="请输入银行卡账号" />
            </u-form-item>
            <u-form-item label="借款金额" label-width="180" prop="amount" required>
                <u-input v-model="form.amount" disabled />
            </u-form-item>
            <!-- @click="chooseImg()" -->
            <u-form-item label="借款人身份证正面照片" :label-position="labelPosition" prop="riderPictureFront" required>
                <view class="bg-default" v-if="imgBg === ''">
                    <view class="uploadBox">
                        <image class="my_img" :src="avatarUrl"></image>
                    </view>
                    <view class="text-default">拍照上传</view>
                </view>
                <view class="add_img_view" v-else>
                    <view class="add_img_item" style="position: relative;">
                        <image :src="imgBg"></image>
                        <!-- <view class="add_close" @click.stop="deleteImg()">
                            <uni-icons type="clear" size="15" color="#4977F9"></uni-icons>
                        </view> -->
                        <u-icon style="position: absolute;top:4px;right: 16px;z-index: 1;" class="preview-del-icon"
                            name="close-circle-fill" color="#FA3534" size="52" />
                    </view>
                </view>
            </u-form-item>
            <u-form-item label="借款人身份证反面照片" :label-position="labelPosition" prop="riderPictureVerso" required>
                <view class="bg-default" v-if="imgBg1 === ''">
                    <view class="uploadBox">
                        <image class="my_img" :src="avatarUrl"></image>
                    </view>
                    <view class="text-default">拍照上传</view>
                </view>
                <view class="add_img_view" v-else>
                    <view class="add_img_item" style="position: relative;">
                        <image :src="imgBg1"></image>
                        <u-icon style="position: absolute;top:4px;right: 16px;z-index: 1;" class="preview-del-icon"
                            name="close-circle-fill" color="#FA3534" size="52"/>
                        <!-- <view class="add_close" @click.stop="deleteImg1()">
                            <uni-icons type="clear" size="15" color="#4977F9"></uni-icons>
                        </view> -->
                    </view>
                </view>
            </u-form-item>
            <u-form-item label="骑手手持身份证照片" :label-position="labelPosition" prop="riderIdcardPic" required>
                <view class="bg-default" v-if="imgBg3 === ''">
                    <view class="uploadBox">
                        <image class="my_img" :src="avatarUrl"></image>
                    </view>
                    <view class="text-default">拍照上传</view>
                </view>
                <view class="add_img_view" v-else>
                    <view class="add_img_item" style="position: relative;">
                        <image :src="imgBg3"></image>
                        <u-icon style="position: absolute;top:4px;right: 16px;z-index: 1;" class="preview-del-icon"
                            name="close-circle-fill" color="#FA3534" size="52"/>
                        <!-- <view class="add_close" @click.stop="deleteImg1()">
                            <uni-icons type="clear" size="15" color="#4977F9"></uni-icons>
                        </view> -->
                    </view>
                </view>
            </u-form-item>
            <!-- <u-form-item label="备注" label-width="180" prop="remarks" required>
                <u-input v-model="form.remarks" placeholder="请输入备注" disabled/>
            </u-form-item> -->
        </u-form>
        <u-button type="primary" shape="square" :ripple="true" size="default" @click="submit" class="custom-btn"
            :throttle-time="5000">同意担保
        </u-button>
        <u-button style="margin-top: 15px;" type="error" shape="square" :ripple="true" size="default" @click="butongyi"
            class="custom-btn" :throttle-time="5000">不同意担保
        </u-button>
        <u-modal v-model="showModel1" content="确认不同意担保？" @confirm="submitData" @cancel="cancel"
            show-cancel-button></u-modal>
        <u-modal v-model="showModel" :title="title" :show-confirm-button="false" @cancel="clear" confirmText="提交">
            <view class="slot-content" style="min-height: 430rpx">
                <my-sign @init="onSignInit" @end="endConfirm" ref="mySign" bgColor="#fff" width="100%" :height="signHeight">
                </my-sign>
                <view class="signBtn-box">
                    <view class="signBtn-item2">
                        <button type="default" plain="true" class="lnvestor-btn2" hover-class="hover"
                            @click="clear">取消</button>
                        <button type="default" class="lnvestor-btn2" hover-class="hover" @click="submitBtn"
                            :disabled="vsignDisabled">提交签名</button>
                    </view>
                </view>
            </view>
        </u-modal>
        <u-select v-model="bankNameShow" :list="optionsList" mode="single-column"
            @confirm="bankNameShowCallback"></u-select>
        <u-toast ref="uToast"></u-toast>
        <u-modal class="xieyiBoxModal" v-model="xieyiModel" :title="'借 款 协 议 书'" @confirm="submitXieyiBtn" @cancel="clear1"
            confirmText="签字提交" show-cancel-button cancelText="取 消">
            <!-- style="height: 930rpx;overflow-y: scroll;" -->
            <view class="slot-content">
                <view class="xieyibox">
                    <view class="xieyiitem xieyiitem1">
                        <view>出借人（甲方）：</view>
                        <view>马惠平</view>
                        <view>联系方式：</view>
                        <view>13802103865</view>
                    </view>
                    <view class="xieyiitem xieyiitem1">
                        <view>借款人（已方）：</view>
                        <view>{{ form.riderName }}</view>
                        <view>联系方式：</view>
                        <view>{{ form.riderPhone }}</view>
                    </view>
                    <view class="xieyiitem xieyiitem2">
                        <view>借款人住址：</view>
                        <view>{{ form.riderAddress }}</view>
                    </view>
                    <view class="xieyiitem xieyiitem2">
                        <view>身份证号：</view>
                        <view>{{ form.riderIdNumber }}</view>
                    </view>
                    <view class="xieyiitem xieyiitem3">
                        为了保障双方当事人的合法权益，依据《中华人民共和国合同法》及相关法律法规的规定，经甲乙双方友好协商，就乙方向甲方借款事宜达成一致意见，特订立此协议：
                    </view>
                    <view class="xieyiitem">第一条：</view>
                    <view class="xieyiitem xieyiitem2">
                        <view>借款用途：</view>
                        <view>{{ form.reason }}</view>
                    </view>
                    <view class="xieyiitem">第二条：借款金额和还款期限</view>
                    <view class="xieyiitem">
                        1.借款金额：人民币（大写）
                        <text>{{ form.amount | filerYuan }}</text>
                        元整，人民币（小写）
                        <text>{{ form.amount }}元</text>整
                    </view>
                    <view class="xieyiitem">
                        2．借款期限：经双方协商本协议的借款的还款期限为1个月，次月20号还款。
                    </view>
                    <view class="xieyiitem">
                        第三条：双方权利与义务
                    </view>
                    <view class="xieyiitem">
                        1.甲方在本协议签订之日起将上述款项交付乙方，乙方向甲方出具收到此款项之后的借条。
                    </view>
                    <view class="xieyiitem">
                        2.甲方有权不定期向乙方检核款项使用情况，乙方不得将此款项挪作他用。
                    </view>
                    <view class="xieyiitem">
                        3.利息约定：如乙方逾期偿还借款，甲方有权自乙方借款之日起按照中国人民银行同期贷款利率的了两倍计息至还款之日。
                    </view>
                    <view class="xieyiitem">
                        4.乙方委托并授权甲方有权从乙方的配送服务费中予以扣减收取。
                    </view>
                    <view class="xieyiitem">
                        第四条：担保条款
                    </view>
                    <view class="xieyiitem">
                        乙方上述条款的履行由担保人
                        <text>{{ form.guaName }}</text>
                        身份证号:
                        <text>{{ form.guaIdNumber }}</text>
                    </view>
                    <view class="xieyiitem">
                        作为甲方提供乙方借款的担保人。如乙方到期无法偿还，将由担保人代替向甲方支付余下借款，并承担本协议第五条中约定的违约责任。
                    </view>
                    <view class="xieyiitem">
                        第五条：违约责任
                    </view>
                    <view class="xieyiitem">
                        1.乙方不按合法用途使用此项借款，甲方一经发现有权收回全部借款
                    </view>
                    <view class="xieyiitem">
                        2.乙方如逾期不归还借款，乙方应按照借款总额的30%向甲方支付违约金
                    </view>
                    <view class="xieyiitem">
                        3.乙方如逾期不归还借款，乙方应支付甲方向乙方催款所产生的所有交通、食宿费用；
                    </view>
                    <view class="xieyiitem">
                        4.乙方如逾期不归还借款，甲方有权利通过法律途径追回借款，乙方应当承担甲方走法律诉讼所产生支付的诉讼费、财产保全费、律师代理费等相关费用；
                    </view>
                    <view class="xieyiitem">
                        第六条：其他约定
                    </view>
                    <view class="xieyiitem">
                        1.本协议如有未尽事宜，需经协议各方当事人共同协商，另行补充协议，补充协议与本协议具有同等法律效力；
                    </view>
                    <view class="xieyiitem">
                        2.本协议自签订之日起生效；
                    </view>
                    <view class="xieyiitem">
                        3.本协议一式三份，甲方、乙方、担保方各执一份，具有同等法律效力。
                    </view>
                    <view class="signBtnBox">
                        <view class="signItem1">
                            <view>甲方签字：</view>
                            <view>日期：{{ '' | filtersDate }}</view>
                        </view>
                        <view class="signItem2">
                            <view>乙方签字：</view>
                            <view>日期：{{ form.applyTime }}</view>
                        </view>
                        <view class="signItem3">
                            <view>担保方签字：</view>
                            <view>日期：{{ '' | filtersDate }}</view>
                        </view>
                        <!-- <image class="jiafang" :src="form.riderSignature"></image> -->
                        <image class="yifang" :src="imgBg2"></image>
                        <image class="danbaofang" :src="form.guaSignature"></image>
                    </view>
                </view>
            </view>
        </u-modal>
        <text class="loading-box" v-if="isShowLoading">
            <u-loading mode="circle" size="150" color="#2b85e4"></u-loading>
            <view class="text">数据加载中，请勿退出！</view>
        </text>
    </view>
</template>
<script>
import store from "@/store";
import mySign from './my-sign.vue'
import html2canvas from 'html2canvas'
import { mapGetters } from "vuex";
import { blobToBase64, base64ToBlob } from './file.js'
import AuthInfo from "@/utils/authInfo.js";
import * as consts from "@/utils/constant.js";
import { compressImg } from '@/utils/compressor/compress.js'
import axios from "axios";
export default {
    data() {
        return {
            form: {},
            rules: {
            },
            labelPosition: "top",
            actionNameList: [],
            zhanNameShow: false,
            yongtuShow: false,
            // 上传默认图片
            avatarUrl: require('./tupianshangchuantupian.png'),
            bannerUrl: require('./banner.png'),
            // 背景图展示
            imgBg: '',
            imgBg1: '',
            // 背景图预览
            imgBgArray: [],
            // 背景图路径
            imgBgArr: '',
            // 上传的背景临时路径
            imgBgUrl: '',
            // 上传的背景图绝对路径
            imgBgArrUrl: '',
            showModel: false,
            title: '请在空白处签字确认',
            signHeight: '175px',
            vsignDisabled: true,
            yongtuValue: '',
            showModel1: false,
            xieyiModel: false,
            isShowLoading: false,
            optionsList: [
                {
                    label: '交通银行',
                    value: '交通银行'
                },
                {
                    label: '中国银行',
                    value: '中国银行'
                },
                {
                    label: '中国建设银行',
                    value: '中国建设银行'
                },
                {
                    label: '中国农业银行',
                    value: '中国农业银行'
                },
                {
                    label: '中国工商银行',
                    value: '中国工商银行'
                },
                {
                    label: '中国邮政储蓄银行',
                    value: '中国邮政储蓄银行'
                },
                {
                    label: '中国光大银行',
                    value: '中国光大银行'
                },
                {
                    label: '中国民生银行',
                    value: '中国民生银行'
                },
                {
                    label: '招商银行',
                    value: '招商银行'
                },
                {
                    label: '中信银行',
                    value: '中信银行'
                },
                {
                    label: '华夏银行',
                    value: '华夏银行'
                },
            ],
            bankNameShow: false,
            showBankName: false,
            imgBg2: '',
            imgBg3: ''
        }
    },
    components: {
        mySign
    },
    onLoad(option) {
        this.isShowLoading = true
        this.getLoanList(uni.getStorageSync("loanid"))
    },
    computed: {
        // ...mapGetters(["openId"]),
    },
    filters: {
        filerYuan(num) {
            //阿拉伯数字转大写，整数转大写
            if (!num) return 0
            const strNum = Number((num + '').replace(/[,，]*/g, '')) + '' // 记录字符
            num = parseInt(Number(strNum)) // 转为整数，
            let capitalAr = '零壹贰叁肆伍陆柒捌玖拾'
            let unitAr = ['拾', '佰', '仟', '万', '拾', '佰', '仟', '亿', '拾', '佰', '仟'] // 单位
            const resultAr = [] // 记录结果，后边json.in就可
            let index = strNum.length - 1 //记录位数
            let idx = 0 // 记录单位
            let percent = 10
            const turnNum = (num, percent, index) => {
                const unit = num / percent
                const capital = capitalAr[Number(strNum[index])]
                if (unit < 1) {
                    resultAr.push(capital)
                    // 出现11【一十一】这种情况
                    if (Number(strNum[index]) === 1 && (strNum.length === 2 || strNum.length === 6 || strNum.length === 10)) {
                        resultAr.pop()
                    }
                    return false //结束递归
                } else {
                    if (capital === '零') {
                        // 万和亿单位不删除
                        if (!['万', '亿'].includes(resultAr[resultAr.length - 1])) {
                            resultAr.pop()
                        }
                        // 前面有零在删掉一个零
                        if (resultAr[resultAr.length - 1] === '零') {
                            resultAr.pop()
                        }
                    }
                    resultAr.push(capital)
                    // 过滤存在【零万】【零亿】这种情况
                    if (['万', '亿'].includes(resultAr[resultAr.length - 2]) && capital === '零') {
                        resultAr.pop()
                    }
                    // 过滤【1亿万】这种情况
                    if (resultAr[0] === '万' && resultAr[1] === '亿') {
                        resultAr.shift()
                    }
                    // 末尾【零】删掉
                    if (resultAr[0] === '零') {
                        resultAr.pop()
                    }
                    resultAr.push(unitAr[idx++])
                    turnNum(num, percent * 10, --index)
                }
            }
            turnNum(num, percent, index)
            return resultAr.reverse().join('')
            // console.log(numToCapital(1512345672, 'capital'))
            // 壹拾伍亿壹仟贰佰叁拾肆万伍仟陆佰柒拾贰
        },
        filtersDate(){
            const date = new Date();
            const year = date.getFullYear(); // 获取当前年份，例如：2021
            const month = date.getMonth() + 1; // 获取当前月份，注意需要加1，例如：9
            const day = date.getDate(); // 获取当前日期，例如：22
            return year+'-'+month+'-'+day
        }
    },
    methods: {
        clear1() {
            this.xieyiModel = false;
        },
        submitXieyiBtn() {
            this.showModel = true;
        },
        async getLoanList(id) {
            let res = await this.$api.jiekuan.getLoanById(id)
            this.form = res.data
            this.isShowLoading = false
            // /xsdcrm-wechat-api/profile/upload/
            this.imgBg = consts.API_BASE_URL+'/xsdcrm-static/upload/'+res.data.riderPictureFront
            this.imgBg1= consts.API_BASE_URL+'/xsdcrm-static/upload/'+res.data.riderPictureVerso
            this.imgBg2= consts.API_BASE_URL+'/xsdcrm-static/upload/'+res.data.riderSignature
            this.imgBg3= consts.API_BASE_URL+'/xsdcrm-static/upload/'+res.data.riderIdcardPic
            if (this.form.reason == '垫付车辆租金') {
                this.rules.carName = [{
                  type: 'string',
                  required: true,
                  message: '请输入车行名称',
                  trigger: ['blur', 'change']
                }]
                this.rules.payeeName = [{
                    type: 'string',
                    required: true,
                    message: '请输入收款人姓名',
                    trigger: ['blur', 'change']
                }]
                this.rules.bankName = [{
                  type: 'string',
                  required: true,
                  message: '请输入开户银行',
                  trigger: ['blur', 'change']
                }]
                this.rules.bankAccount = [{
                    type: 'string',
                    required: true,
                    message: '请输入收款账号',
                    trigger: ['blur', 'change']
                }]
                this.$nextTick(()=>{
                  this.$refs.uForm.setRules(this.rules)
                })
            }
        },
        showPickerMax1() {
            this.bankNameShow = true;
        },
        bankNameShowCallback(e) {
            this.form.bankName = e[0].label;
        },
        butongyi() {
            this.showModel1 = true;
        },
        async saveForm() {
            let datas = {
                ids: [this.form.id],
                guaOpenid: uni.getStorageSync("openidd"),
                status: 1,
                guaSignature: this.form.guaSignature,
                bankName: this.form.bankName,
                payeeName: this.form.payeeName,
                carName: this.form.carName,
                bankAccount: this.form.bankAccount
            }
            let rons = await this.$api.jiekuan.securityLoan(datas);
            if (rons.code == 200) {
                this.$refs.uToast.show({
                    type: 'success',
                    title: '保存成功'
                })
                let query = {
                    ids: [this.form.id]
                }
                await this.$api.jiekuan.startAgreement(query)
                store.commit("UPDATE_ROUTEURL", "/pages/loanGuarantee/mylist");
            }
        },
        uploadPic1(file, name) {
            const service = axios.create({
                baseURL: consts.API_BASE_URL,
                timeout: 1000 * 60 * 3,
                headers: {
                    "Content-Type": "multipart/form-data",
                },
            });
            service.interceptors.request.use(
                (config) => {
                    if (
                        config.url.indexOf("withoutLogin") == -1 ||
                        config.url.indexOf("bindAndLogin") == -1 ||
                        config.url.indexOf("listDept") == -1
                    ) {
                        let token = uni.getStorageSync("token");
                        token && token !== "" && (config.headers.Authorization = "Bearer " + token);
                    }
                    return config;
                },
                (error) => {
                    return Promise.reject(error);
                }
            );

            const formData = new FormData();
            formData.append("file", file);

            uni.showLoading({
                title: "图片上传中，请稍后···",
            });

            service({
                url: "/xsdcrm-wechat-api/common/upload",
                method: "POST",
                data: formData,
            }).then((respon) => {
                let res = respon.data;
                console.log(res)
                uni.hideLoading();
                if (res.code != 200) {
                    uni.showToast({
                        title: res.msg,
                        icon: "error",
                    });
                    return;
                }
                this.$set(this.form, name, res.fileName);
                this.showModel = false;
                this.saveForm();

            }).catch((err) => {
                uni.hideLoading();
                uni.showToast({
                    title: err,
                    icon: "error",
                });
            });
        },
        submitBtn() {
            const _this = this;
            _this.vsignDisabled = true;
            html2canvas(document.querySelector("#mysign")).then(function (canvas) {
                canvas.toBlob(function (blob) {
                    let blobs = new Blob([blob], { type: "text/plain;charset=utf-8" });
                    console.log("Blob对象", blobs);
                    let file = new File([blobs], _this.form.riderName + '.jpg', { type: blobs.type })
                    console.log("File对象", file);
                    _this.uploadPic1(file, "guaSignature");
                    // blobToBase64(blob).then(res => {
                    //     _this.form.guaSignature = res
                    //     _this.showModel = false
                    //     _this.saveForm()
                    // }).catch(err => {
                    //     console.log(err)
                    // })
                });
            })
        },
        // 取消
        cancelBtn() {
            uni.navigateBack({
                delta: 1
            })
        },
        // 清除
        clear() {
            this.signCtx.clear();
            this.showModel = false;
        },
        onSignInit(signCtx) {
            this.signCtx = signCtx;
        },
        // 绘画结束触发
        endConfirm() {
            this.vsignDisabled = false;
        },
        async submitData() {
            let datas = {
                ids: [this.form.id],
                guaOpenid: uni.getStorageSync("openidd"),
                status: 2,
                guaSignature: ''
            }
            let rons = await this.$api.jiekuan.securityLoan(datas);
            if (rons.code == 200) {
                this.$refs.uToast.show({
                    type: 'success',
                    title: '保存成功'
                })
                store.commit("UPDATE_ROUTEURL", "/pages/loanGuarantee/mylist");
            }
        },
        cancel() {

        },
        submit() {
          this.$refs.uForm.validate(async (valid) => {
            console.log('valid',valid)
            if (valid) {
              this.xieyiModel = true;
            } else {
              uni.showToast({
                title: '请将信息填写完整！',
                icon: "error",
              });
            }
          });
        },
        zhanNameCallback(e) {
            this.form.riderDeptName = e[0].label;
            this.form.riderDeptId = e[0].value;
        },
        yongtuCallback(e) {
            this.form.reason = e[0].label;
            this.yongtuValue = e[0].value;
        }
    }
}
</script>
<style lang="scss" scoped>
.applyforLoan {
    padding: 10px;

    .bg-default {
        width: 100px;
        margin: 0 auto;
    }

    .uploadBox {
        width: 100rpx;
        height: 100rpx;
    }

    .my_img {
        width: 100rpx;
        height: 100rpx;
    }

    .add_img_view {
        width: 85%;
        margin: 0 auto;
    }

    .tabBox {
        position: relative;

        uni-image {
            height: 200rpx;
        }

        .tabName {
            color: #fff;
            font-size: 24px;
            margin: 0;
            padding-left: 30px;
            padding-top: 30px;
            position: absolute;
            top: 0;
            left: 80px;
        }
    }

    .u-form {
        padding: 10px;
    }

    .xieyiBoxModal {
        ::v-deep .u-mode-center-box {
            width: 96% !important;
        }

        ::v-deep .u-model__title {
            padding-top: 10px !important;
            padding-bottom: 5px;
            font-weight: bold;
            border-bottom: 1px solid #999999;
        }

        .xieyibox {
            padding: 5rpx;
            height: 100%;
            overflow-y: scroll;

            .xieyiitem {
                margin-top: 7px;

                uni-text {
                    display: inline-block;
                    border-bottom: 1px solid #999999;
                    padding-left: 10px;
                    padding-right: 10px;
                }
            }

            .xieyiitem1 {
                display: flex;

                uni-view {
                    &:nth-of-type(1) {
                        padding-left: 3px;
                    }

                    &:nth-of-type(3) {
                        padding-left: 5px;
                    }
                }
            }

            .xieyiitem2 {
                overflow: hidden;

                uni-view {
                    float: left;

                    &:nth-of-type(1) {
                        width: 100px;
                    }

                    &:nth-of-type(2) {
                        width: 230px;
                        border-bottom: 1px solid #999999;
                        padding-left: 10px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }

            .xieyiitem3 {
                overflow: hidden;
                padding: 3px;

                uni-view {
                    float: left;
                }
            }
        }

        .signBtnBox {
            height: 120px;
            overflow: hidden;
            position: relative;

            .signItem1 {
                width: 50%;
                position: absolute;
                top: 20px;
                left: 10px;
                z-index: 50;
            }

            .signItem2 {
                width: 50%;
                position: absolute;
                top: 20px;
                right: 10px;
                z-index: 50;
            }

            .signItem3 {
                width: 50%;
                position: absolute;
                top: 70px;
                left: 10px;
                z-index: 50;
            }

            .jiafang {
                width: 100px;
                height: 60px;
                position: absolute;
                top: 0;
                left: 78px;
                z-index: 20;
            }

            .danbaofang {
                width: 100px;
                height: 60px;
                position: absolute;
                top: 50px;
                left: 25px;
                z-index: 20;
            }

            .yifang {
                width: 100px;
                height: 60px;
                position: absolute;
                top: 0;
                right: 25px;
                z-index: 20;
            }
        }
    }
}

.sign-contain {
    padding-left: 35rpx;
    padding-right: 35rpx;

    .sign-top {
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        text-align: center;
        color: #999999;
    }
}

.signBtn-box {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .signBtn-item2 {
        border-top: 1px solid #ccc;
        width: 100%;

        // 按钮样式
        ::v-deep .lnvestor-btn1 {
            width: 200px;
            float: left;
            height: 40px;
            font-size: 16px;
            border: none;
            color: #606266;
            border-radius: 0;
        }

        .lnvestor-btn2 {
            width: 50%;
            float: left;
            border-radius: 20px;
            font-size: 16px;
            height: 40px;
            border: none;
            color: #2979ff;
            border-radius: 0;

            &::after {
                border: none;
                border-left: 1px solid #ccc;
            }
        }

        .hover {
            border: 1px solid #ccc !important;
            color: #ccc !important;
            font-size: 16px !important;
        }
    }
}
.loading-box {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding-top: 50%;
    background-color: #00000099;
    z-index: 2000;

    .text {
        margin-top: 10px;
        color: #fff;
    }
}
</style>
